---
layout: demo
title: Light7 Demo
---
<div id="page-grid" class="page">
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-left back" href="/demos">
      <span class="icon icon-left"></span>
      Back
    </a>
    <a class="button button-link button-nav pull-right open-popup" data-popup=".popup-second">
      About
      <span class="icon icon-menu"></span>
    </a>
    <h1 class="title">Grid</h1>
  </header>
  <div class="content" id=''>
    <div class="content-padded grid-demo">
      <div class="row">
        <div class="col-50">50%</div>
        <div class="col-50">50%</div>
      </div>
      <div class="row">
        <div class="col-33">33%</div>
        <div class="col-33">33%</div>
        <div class="col-33">33%</div>
      </div>
      <div class="row">
        <div class="col-20">20%</div>
        <div class="col-80">80%</div>
      </div>
      <h2>No Gutter</h2>
      <div class="row no-gutter">
        <div class="col-20">20%</div>
        <div class="col-80">80%</div>
      </div>
      <div class="row no-gutter">
        <div class="col-50">50%</div>
        <div class="col-50">50%</div>
      </div>
    </div>
  </div>
</div>

<div class="popup popup-second">
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-right close-popup">
      Close
    </a>
    <h1 class="title">About light7</h1>
  </header>
  <div class="content">
    <div class="content-inner">
      <div class="content-block">
        <p>light7 is a light and easy to use UI Lib for webapp。</p>
        <p>See <a href='http://light7.org/' external target='_blank'>http://light7.org/</a> for more docs.</p>
        <p>Contact me: <a href='mailto:lihongxun945@gmail.com'>lihongxun945@gmail.com</a></p>
        <p></p>
        <p><a class="button close-popup">OK</a></p>
      </div>
    </div>
  </div>
</div>
